<!DOCTYPE html>
<html>
<head>
	<title>imageCropper</title>
	<link href="./css/bootstrap.min.css" rel="stylesheet">
	<link href="./css/style.css" rel="stylesheet" type="text/css" />
	<link href="./css/cropper.min.css" rel="stylesheet" type="text/css" />
	<link href="./css/cropperPicture.css" rel="stylesheet" type="text/css" />
</head>
<body>

	<div class="container">
		<div class="row">
			<p>
				<button id="img-upload1" type="button" class="btn btn-primary">图片上传1</button>
			</p>
		</div>
	</div>

	<script src="./js/jquery.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>
	<script src="./js/cropper.min.js"></script>
	<script src="./js/cropperPicture.js"></script>


	<script type="text/javascript">

		let imageCropper1 = $.CropAvatarBuilder({
			// id 可不填 默认随机数
            id: "jubencover-img-upload",

            // 模态框标题名 可不填 默认 ‘图片上传’
            title: '图片上传',

            // 类似副标题 可不填 默认 ‘选择本地图片’
            fileLabel: '选择本地图片',

            // 上传按钮文字 可不填 默认 ‘上传’
            sumitBtnText: '上传',

			// 上传问的作为参数的名 被封装再formdata里面了 可不填 默认img
            imgInputName: 'img',

            // 指定dom点击后触发弹出图片裁剪模态框
            trigger: "#img-upload1",

            // 选择图片后的预览domselctor
            preview: ".avatar-preview",
            
            // 裁剪框 可设定固定宽高比 如 16/9 或者正方形 1 或者任意裁剪 null
            aspectRatio: 300/400,

            // 提交方法 formData 表单数据对象 obj当前裁剪对象
            submit: function(formData, obj) {

                // 再此处自己去实现文件上传方法

                console.log("文件表单对象->" + formData);
                console.log("自身组件对象->" + obj);

				// 上传失败时，可用该方法再模态框内提示错误信息
				// obj.alert("上传失败，原因：");   

				// 开起加载等待遮罩
				obj.startLoading();
				setTimeout(function() {
					// 关闭等待遮罩
					obj.stopLoading();
					// 模态框关闭
					obj.cropDone();	
				}, 2000);
				
            }
        });

	</script>
</body>
</html>